<template>
	<div class="userbox">
		<div class="formdata">
			<el-row  type="flex" justify="center">
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.artworkName') }}</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light">{{ form.artworkName[$i18n.locale] }}</div></el-col>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.price',{currency:`(${form.paymentCurrency||'USD'})`}) }}</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light">{{ form.orderPrice }}</div></el-col>
				<!-- <el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.artPrice',{currency:`(${form.paymentCurrency||'USD'})`}) }}</div></el-col> -->
				<!-- <el-col :span="8"><div class="grid-content bg-purple-light">{{ form.artworkPrice }}</div></el-col> -->
			</el-row>
			<el-row>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.type') }}</div></el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple-light">
						<el-tag v-if="form.category == 11" type="info">{{ $t('artwork_data.classification.class1') }}</el-tag>
						<el-tag v-else-if="form.category == 12" type="success">{{ $t('artwork_data.classification.class2') }}</el-tag>
						<el-tag v-else-if="form.category == 13" type="warning">{{ $t('artwork_data.classification.class3') }}</el-tag>
						<el-tag v-else-if="form.category == 14" type="info">{{ $t('artwork_data.classification.class4') }}</el-tag>
						<el-tag v-else-if="form.category == 15" type="info">{{ $t('artwork_data.classification.class7') }}</el-tag>
						<el-tag v-else-if="form.category == 21" type="success">{{ $t('artwork_data.classification.class5') }}</el-tag>
						<el-tag v-else type="warning">{{ $t('artwork_data.classification.class6') }}</el-tag>
					</div>
				</el-col>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.paymentMethod') }}</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light">{{ form.paymentMethod == 1?$t('artwork_data.form.online'):$t('artwork_data.form.outline') }}</div></el-col>
			</el-row>
			<el-row>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.creatorName') }}</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light">{{ form.creatorName[$i18n.locale] }}</div></el-col>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.sellCinema') }}</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light">{{ form.saleCinema }}</div></el-col>
			</el-row>
			<el-row>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.paymentTime') }}</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light">{{ form.orderDateTime }}</div></el-col>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.gmoId') }}</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light">{{ form.gmoId }}</div></el-col>
			</el-row>
			<el-row>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.userName') }}</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light">{{ form.orderUserName }}</div></el-col>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.nftStatus') }}</div></el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple-light">
						<el-tag v-if="form.nftStatus == 0" type="info">{{ $t('table_data.no') }}</el-tag>
						<el-tag v-else-if="form.nftStatus == 1" type="success">{{ $t('table_data.yes') }}</el-tag>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.status') }}</div></el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple-light">
						<el-tag v-if="form.status == 1" type="info">{{ $t('order_data.statusType.status1') }}</el-tag>
						<el-tag v-else-if="form.status == 2" type="success">{{ $t('order_data.statusType.status2') }}</el-tag>
						<el-tag v-else-if="form.status == 3" type="danger">{{ $t('order_data.statusType.status3') }}</el-tag>
						<el-tag v-else-if="form.status == 4" type="danger">{{ $t('order_data.statusType.status4') }}</el-tag>
						<el-tag v-else type="info">{{ $t('order_data.statusType.status5') }}</el-tag>
					</div>
				</el-col>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.nftId') }}</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light">{{ form.nftId }}</div></el-col>
			</el-row>
			<el-row>
				<el-col :span="4"><div class="grid-content bg-purple">{{ $t('order_data.artPrice') }}</div></el-col>
				<el-col :span="20"><div class="grid-content bg-purple-light">{{ form.artworkPrice }}</div></el-col>
			</el-row>
			<!-- <el-form :model="form" :rules="rules" ref="dialogForm" label-width="auto" label-position="right">
				<div class="item">
					<el-form-item :label="$t('order_data.artworkName')">
						<el-input v-model="form.artworkName[$i18n.locale]" clearable :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('order_data.artPrice',{currency:`(${form.paymentCurrency||'USD'})`})">
						<el-input v-model="form.artworkPrice" clearable :disabled="disabled"></el-input>
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('order_data.type')">
						<el-tag v-if="form.category == 11" type="info">{{ $t('artwork_data.classification.class1') }}</el-tag>
						<el-tag v-else-if="form.category == 12" type="success">{{ $t('artwork_data.classification.class2') }}</el-tag>
						<el-tag v-else-if="form.category == 13" type="warning">{{ $t('artwork_data.classification.class3') }}</el-tag>
						<el-tag v-else-if="form.category == 14" type="info">{{ $t('artwork_data.classification.class4') }}</el-tag>
						<el-tag v-else-if="form.category == 15" type="info">{{ $t('artwork_data.classification.class7') }}</el-tag>
						<el-tag v-else-if="form.category == 21" type="success">{{ $t('artwork_data.classification.class5') }}</el-tag>
						<el-tag v-else type="warning">{{ $t('artwork_data.classification.class6') }}</el-tag>
					</el-form-item>
					<el-form-item :label="$t('order_data.price',{currency:`(${form.paymentCurrency||'USD'})`})">
						<el-input v-model="form.orderPrice" clearable :disabled="disabled"></el-input>
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('order_data.creatorName')">
						<el-input v-model="form.creatorName[$i18n.locale]" clearable :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('order_data.paymentMethod')">
						<span v-if="form.paymentMethod == 1">{{ $t('artwork_data.form.online') }}</span>
						<span v-else>{{ $t('artwork_data.form.outline') }}</span>
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('order_data.userId')">
						<el-input v-model="form.userId" clearable :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('order_data.userName')">
						<el-input v-model="form.userName" clearable :disabled="disabled"></el-input>
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('order_data.status')">
						<el-tag v-if="form.status == 1" type="info">{{ $t('order_data.statusType.status1') }}</el-tag>
						<el-tag v-else-if="form.status == 2" type="success">{{ $t('order_data.statusType.status2') }}</el-tag>
						<el-tag v-else-if="form.status == 3" type="danger">{{ $t('order_data.statusType.status3') }}</el-tag>
						<el-tag v-else-if="form.status == 4" type="danger">{{ $t('order_data.statusType.status4') }}</el-tag>
						<el-tag v-else type="info">{{ $t('order_data.statusType.status5') }}</el-tag>
					</el-form-item>
				</div>
			</el-form> -->
		</div>
		<div id="footer" v-if="!disabled">
			<!-- <el-button @click="visible=false" >{{$t('table_data.cancelText')}}</el-button> -->
			<el-button type="primary" :loading="isSaveing" @click="submit()">{{$t('table_data.saveText')}}</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				disabled: false,
				form: {
					artworkName: {
						"en_US": '',
						"ja_JP": "",
						"zh_CN": "",
						"zh_TW": ""
					},
					creatorName: {
						"en_US": '',
						"ja_JP": "",
						"zh_CN": "",
						"zh_TW": ""
					},
					"theatre_id": "",
					"theatreId": "",
					"theatreName": "",
					"area": null,
					"longitude": null,
					"latitude": null
				},
				rules: {
					"theatreName": [
						{required: true, message: this.$t('formRule.theatreName_rule'), trigger: 'change'}
					],
					// "area": [
					// 	{required: true, message: this.$t('formRule.area_rule'), trigger: 'change'}
					// ],
					// "longitude": [
					// 	{required: true, message: this.$t('formRule.longitude_rule'), trigger: 'change'}
					// ],
					// "latitude": [
					// 	{required: true, message: this.$t('formRule.latitude_rule'), trigger: 'change'}
					// ]
				},
				isSaveing: false
			}
		},
		mounted(){
			this.disabled = this.$route.query.type=='detail'&&this.$route.query.id != 'add'?true:false;
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.creator.orderHistory'):this.$t('menu.theatreEdit'))
			if(this.$route.query.id != 'add'){
				this.getInfo()
			}
		},
		methods: {
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			async getInfo(){
				let id = this.$route.query.id;
				const res = await this.$API.order.theatreDetail.get(id);
				this.form = res.data;
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						this.form.theatre_name = this.form.theatreName;
						this.form.theatre_id = this.form.theatreId;
						var res = await this.$API.theatre.theatreUpload.post(this.form);
						this.isSaveing = false;
						if(res.code == 'OK'){
							this.$message.success(this.$t('table_data.operasucc'))
							this.closeTag();
						}else{
							this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
.grid-content {
	border: 1px solid #eee;
	font-size: 14px;
	min-height: 50px;
	/* line-height: 50px; */
	padding-left: 12px;
	display: flex;
  align-items: center;
}
.bg-purple {
	background: #F6F8F9;
	color: #888;
	
	display: flex;
    align-items: center;
}
.bg-purple-light {
	color: #000;
}
.userbox {
	background: #fff;
	padding: 30px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.el-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.el-col {
	word-break: break-all;
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 100px;
}
.el-select {
	width: 100%;
}
.item-firstName,.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	height: 100px;
	width: 50%;
}
.item-right{
	height: 140px;
}
.head {
	width: 150px;
  height: 150px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	height: 82px;
	width: 100%;
}
.rightInput .el-input {
	width: 46%;
}
.item-left .el-form-item__content .el-input {
	width: 46%;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
}
</style>
